<style>
    .list-group {
        background: #fff;
        padding: 21px 30px;
    }

    .title {
        display: block;
        width: 300px;
        margin-top: 0;
        padding-bottom: 7px;
        border-bottom: 1px solid lightgray;
        margin-bottom: 17px;
        font-size: 18px;
        font-weight: bold;
        color: black;
        position: relative;
    }

    .title:after {
        box-sizing: border-box;
        content: "";
        width: 90px;
        height: 1px;
        background: #24557f;
        position: absolute;
        left: 0;
        bottom: -1px;
    }

    .listItem {
        display: flex;
        width: 100%;
        border: none;
        border-bottom: solid lightgrey 0px;
        padding: 10px 67px;
        font-size: 12px;
    }

    .listItem label {
        font-weight: normal;
        padding-right: 10px;
        position: relative;
    }

    .form-control {
        display: inline-block;
        height: 25px;
        width: 180px;
        padding: 1px 10px;
        font-size: 12px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        margin-left: 10px;
    }

    .form-control-feedback {
        width: 200px;
        right: -200px;
        height: 25px;
        line-height: 25px;
    }

    .inputName {
        width: 500px;
    }

    .inputNum {
        margin-left: 0px;
        width: 50px;
    }

    .lPlabel {
        margin-left: 30px;
        margin-right: 30px;
    }

    .inputN {
        width: 50px;
    }

    .input-group-addon {
        display: inline-block;
        box-sizing: border-box;
        width: 40px;
        height: 30px;
        background: #fff;
    }

    .Datetime {
        padding-top: 1px;
        display: inline-block;
        box-sizing: border-box;
        height: 30px;
    }

    .form_datetime {
        display: flex;
    }

    .form_datetime label {
        line-height: 25px;
    }

    .attri {
        width: 240px;
    }

    .addButton {
        margin-left: 10px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        padding: 0 15px;
    }
    .deButton{
        margin-left: 10px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        padding: 0 15px;
        margin: 2px 10px;
    }
    .tableStyle{
        margin-left: 67px;
    }
    .addAttriButton{
        margin:12px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        padding: 0 15px;
    }
    .addStyleAttri{
        height: 50px;
        line-height: 50px;
    }

    /* .form_datetime {
        display: inline-block; 
    }*/

    /* .add-on {
        width: 14px;
    } */
</style>

<body>
    <ul class="list-group" id="form-test">
        <span class="title">添加商品</span>
        <div class="listItem">
            <label>商品编号:
                <input type="text" name="" id="lq_num" class="form-control" placeholder="只能输入数字和字母">
                <span id="lq_num_tip"></span>
            </label>
        </div>
        <div class="listItem">
            <label for="">商品名称:
                <input type="text" name="" id="lq_name" class="form-control inputName" placeholder="请输入商品名称">
                <span id="lq_name_tip"></span>
            </label>
        </div>
        <div class="listItem">
            <label for="">商品价格:
                <label class="lPlabel">原价
                    <input type="text" name="" id="lq_lP" class="form-control inputNum" placeholder="原价">元
                </label>
                <label for="">现价
                    <input type="text" name="" id="lq_nP" class="form-control inputNum" placeholder="现价">元
                </label>
                <span id="lq_P_tip"></span>
            </label>
        </div>
        <div class="listItem">
            <label for="">库存数量:
                <input type="text" name="" id="lq_sN" class="form-control inputN">
                <span id="lq_sN_tip"></span>
            </label>
        </div>
        <div class="listItem">
            <label for="">售出数量:
                <input type="text" name="" id="lq_sP" class="form-control inputN">
                <span id="lq_sP_tip"></span>
            </label>
        </div>

        <div class="listItem">
            <label for="">优惠套餐:
                <label class="lPlabel">售出
                    <input type="text" name="" id="lq_discounts1" class="form-control inputNum" disabled>件</label>
                <label for="">优惠
                    <input type="text" name="" id="lq_discounts2" class="form-control inputNum" disabled>元</label>
            </label>
        </div>
        <div class="listItem" id="lq_umm">
            <label for="">添加类别:
                <input type="text" name="" id="lq_umm_cate" placeholder="请输入类别,如:颜色" class="form-control">
            </label>
            <label for="">添加参数:
                <input type="text" name="" id="lq_umm_attri" placeholder="请输入参数,如:红色#紫色#绿色" class="form-control attri">
            </label>
            <button id="lq_umm_button" class="btn btn-primary addButton">确认添加</button>
        </div>
        <div class="listItem"></div>
        <table id="lq_cateList" class="table table-striped tableStyle">
            <tr>
                <th>类别</th>
                <th>参数</th>
                <th></th>
            </tr>
        </table>
        </div>
        <div class="listItem addStyleAttri" id="lq_emm">
            <button id="lq_emm_button" class="btn btn-primary addAttriButton">确认添加</button>
            <span class="inlineSpan"> 添加商品款式:</span>
        </div>
        <div class="listItem" id="lq_emm_table">
            <table id="lq_emm_List" class="table table-striped">
            </table>
        </div>

        <div class="listItem">
            <div class="input-group date form_datetime" data-date="2018-06-01" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
                <label>倒计时:</label>
                <input size="20" type="text" value="" class="Datetime" id="lq_time_date" placeholder="请选择日期和时间" readonly>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </span>
                <span id="lq_time_tip"></span>
            </div>
        </div>

        <div class="listItem">主图片:
            <input type="file" name="" id="file1"/>
        </div>

        <div class="listItem">详情图片:
            <input type="file" name="" id="file2"/>
        </div>


        <div class="listItem">
            <label for="">商品简介:
                <input type="text" name="" id="lq_introduce" class="form-control inputName">
            </label>
        </div>
        <div class="listItem">
            <label for="">关键词:
                <input type="text" name="" id="lq_keys" class="form-control" disabled>
            </label>
        </div>
        <div class="listItem">内容:
            <div id="editor"></div>
        </div>
    </ul>
    <button id="submit" class="btn btn-primary">提交</button>
</body>